<template>
  <van-cell 
    title-class="title"
    :title="title"
    :to="{
      name: 'article-detail',
      query: {
        id: newsId,
      },
    }"
    :label="`${ author } ${ commentCount }评论 ${ getTime() }`"
  >
    <template v-if="images.length === 1" #title>
      <div class="warpper">
        <span>{{ title }}</span>
        <div class="image">
          <img :src="images[0]" alt="">
        </div>
      </div>
    </template>
    <template v-else #title>
      <span>{{ title }}</span>
      <div class="images-container">
        <div 
          v-for="(image, i) in images"
          :key="i"
          class="image"
        >
          <img :src="image" alt="">
        </div>
      </div>
    </template>
  </van-cell>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    // 新闻id
    newsId: String,
    // 标题
    title: String,
    // 作者
    author: String,
    // 评论数量
    commentCount: Number,
    // 时间戳
    timestamp: String,
    // 图片数组
    images: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getTime () {
      return moment(this.timestamp).toNow(true) + '内';
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  padding: 0;
  
  .image {
    overflow: hidden;
    border-radius: 4px;
    height: 72px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.warpper {
  width: 100%;
  display: grid;
  // 布局方案
  grid-template-columns: 2fr 1fr;
  // 间隙大小
  grid-gap: 16px;
}
.images-container {
  width: 100%;
  display: grid;
  // 布局方案
  grid-template-columns: 1fr 1fr 1fr;
  // 间隙大小
  grid-gap: 8px;
}
</style>